<template>
  <view class="container">
    <view class="success-header">
      <image class="success-icon" src="/static/success.png" mode="aspectFit"></image>
      <view class="success-text">
        <text class="title">支付成功</text>
        <text class="subtitle">感谢您按时缴费</text>
      </view>
    </view>
    
    <view class="payment-details">
      <view class="detail-item">
        <text class="label">已缴费</text>
        <text class="value bill-name">{{ billDetail.bill_type || '账单费用' }}</text>
      </view>
      
      <view class="detail-item">
        <text class="label">无周期信息</text>
        <text class="value">{{ billDetail.bill_period || '9月份办公室租金' }}</text>
      </view>
      
      <view class="detail-item">
        <text class="label">支付方式</text>
        <text class="value">{{ paymentMethod }}</text>
      </view>
      
      <view class="detail-item">
        <text class="label">交易号</text>
        <text class="value">{{ transactionId }}</text>
      </view>
      
      <view class="amount-section">
        <text class="amount-label">支付金额</text>
        <text class="amount-value">¥{{ billDetail.amount || '0.00' }}</text>
      </view>
      
      <view class="payment-time">
        <text class="time-label">支付时间：</text>
        <text class="time-value">{{ paymentTime }}</text>
      </view>
    </view>
    
    <view class="action-buttons">
      <button class="btn view-bill" @click="viewBill">查看我的账单</button>
      <button class="btn home-btn" @click="goHome">返回首页</button>
    </view>
  </view>
</template>

<script>
import { getBillDetail } from '../../api/billing.js';

export default {
  data() {
    return {
      id: null,
      billDetail: {
        bill_number: '',
        bill_type: '',
        payment_status: '',
        bill_period: '',
        remarks: '',
        amount: '0.00',
        due_date: '',
        payment_date: ''
      },
      paymentMethod: 'wechat',
      transactionId: 'TX' + new Date().getTime().toString().substring(6),
      paymentTime: this.formatDateTime(new Date())
    }
  },
  onLoad(options) {
    console.log('支付成功页面参数:', options);
    if (options.id) {
      this.id = options.id;
      this.fetchBillDetail();
    }
    
    // 设置支付方式和交易号
    this.paymentMethod = uni.getStorageSync('paymentMethod') || 'wechat';
    this.transactionId = uni.getStorageSync('transactionId') || ('TX' + new Date().getTime().toString().substring(6));
    this.paymentTime = this.formatDateTime(new Date());
  },
  methods: {
    // 获取账单详情
    fetchBillDetail() {
      uni.showLoading({
        title: '加载中...'
      });
      
      getBillDetail(this.id).then(res => {
        uni.hideLoading();
        if (res.code === 200 && res.data) {
          this.billDetail = res.data;
        } else {
          console.log('获取账单详情失败:', res);
        }
      }).catch(err => {
        uni.hideLoading();
        console.error('获取账单详情失败:', err);
      });
    },
    
    // 格式化日期时间
    formatDateTime(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    
    // 查看账单
    viewBill() {
      uni.redirectTo({
        url: '/pages/billing/list'
      });
    },
    
    // 返回首页
    goHome() {
      uni.switchTab({
        url: '/pages/index/index'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 40rpx 30rpx;
  background-color: #FFFFFF;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 50rpx;
  padding: 40rpx 0;
}

.success-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 30rpx;
}

.success-text {
  text-align: center;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  margin-bottom: 10rpx;
  display: block;
}

.subtitle {
  font-size: 28rpx;
  color: #999999;
}

.payment-details {
  width: 100%;
  background-color: #F8F8F8;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 60rpx;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
}

.label {
  font-size: 28rpx;
  color: #666666;
}

.value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 500;
}

.bill-name {
  font-weight: bold;
}

.amount-section {
  margin-top: 30rpx;
  padding-top: 20rpx;
  border-top: 1rpx dashed #E5E5E5;
  text-align: center;
}

.amount-label {
  font-size: 28rpx;
  color: #666666;
  display: block;
  margin-bottom: 10rpx;
}

.amount-value {
  font-size: 48rpx;
  color: #333333;
  font-weight: bold;
}

.payment-time {
  margin-top: 20rpx;
  text-align: center;
}

.time-label, .time-value {
  font-size: 24rpx;
  color: #999999;
}

.action-buttons {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 20rpx;
}

.btn {
  width: 45%;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 45rpx;
  font-size: 30rpx;
  font-weight: 500;
}

.view-bill {
  background-color: #FFFFFF;
  color: #007AFF;
  border: 1rpx solid #007AFF;
}

.home-btn {
  background-color: #007AFF;
  color: #FFFFFF;
}
</style> 